<template>
<div class="modalDemoIndex">
  <Menu mode="horizontal" active-name="1" @on-select="changeMenu">
            <MenuItem name="dateModal">
                <Icon type="ios-paper"></Icon>周期模态框
            </MenuItem>
            <MenuItem name="confirmModal">
                <Icon type="ios-paper"></Icon>显示模态框
            </MenuItem>
            <MenuItem name="postModal">
                <Icon type="ios-paper"></Icon>发货模态框
            </MenuItem>
            <MenuItem name="radioModal">
                <Icon type="ios-paper"></Icon>单选式弹窗
            </MenuItem>
            <MenuItem name="payInModal">
                <Icon type="ios-paper"></Icon>启用账号弹窗
            </MenuItem>
            <MenuItem name="addPostModal">
                <Icon type="ios-paper"></Icon>添加岗位弹窗
            </MenuItem>
            <MenuItem name="editPostModal">
                <Icon type="ios-paper"></Icon>编辑岗位弹窗
            </MenuItem>
            <MenuItem name="addUserModal">
                <Icon type="ios-paper"></Icon>添加角色弹窗
            </MenuItem>
            <MenuItem name="adviceModal">
                <Icon type="ios-paper"></Icon>维保方案弹窗
            </MenuItem>
            <MenuItem name="addAdviceModal">
                <Icon type="ios-paper"></Icon>添加维保方案弹窗
            </MenuItem>
  </Menu>
  <h5>以下相关样式请自行取用</h5>

  <div v-if="selected == 'addAdviceModal'">
      <modal-confirm 
        title="添加维保方案"
        subtitle="(车牌号:湘A5678Q)"
        :showModal="showModal"
        modalWidth="600"
        modalHeight="400"
        @on-ok-modal="okModal"
        @on-cancel-modal="cancelModal">
        <div class="marginT10 infoArea">
        <div class="font14">
          <label class="rRtar">保养项目</label>
          <input 
          type="text" 
          style="width:300px"/>
        </div>
        <div class="font14 marginT10">
          <label class="rRtar">配件名称</label>
          <input 
          type="text" 
          style="width:300px"/>
        </div>
        <div class="font14 marginT10">
          <label class="rRtar">配件品牌</label>
          <input 
          type="text" 
          style="width:300px"/>
          
        </div>
        <div class="font14 marginT10">
          <label class="rRtar">配件型号</label>
          <input 
          type="text" 
          style="width:300px"/>
          
        </div>
        <div class="font14 marginT10">
          <label class="rRtar">收费标准</label>
          <input 
          type="text" 
          style="width:200px"
          placeholder="单价(元)" />
          <input 
          type="text" 
          style="width:100px"
          placeholder="单位" />
          <input 
          type="text" 
          style="width:100px"
          placeholder="数量" />
          
        </div>
        <div class="font14 marginT10">
          <label class="rRtar">实际收费</label>
          <input 
          type="text" 
          style="width:200px"
          placeholder="材料费(元)" />
          <input 
          type="text" 
          style="width:215px"
          placeholder="工时费(元)"/>
          
        </div>
      </div>
      <div style="position: absolute;
                  bottom: 23px;">
         <Checkbox style="font-size:14px; color:#5E6D76;">继续添加</Checkbox>
      </div>
      </modal-confirm>
      <Button style="margin-top: 20px" type="warning" @click="getModal">添加维保方案弹窗</Button>

      <h3>HTML代码</h3>
              <!-- 显示HTML代码 -->
      <pre>
          <code class="html" v-text="htmlCode9">
          </code>

      </pre>
  </div>

  <div v-if="selected == 'adviceModal'">
      <modal-confirm 
        title="添加维保方案"
        subtitle="(车牌号:湘A5678Q)"
        :showModal="showModal"
        modalWidth="1000"
        modalHeight="560"
        @on-ok-modal="okModal"
        @on-cancel-modal="cancelModal">
        <div style="height: 100%;
                    width: 318px;
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    border-right: 1px solid #efefef;
                    ">
                    <div style="margin-top: 45px;
                                overflow: auto;
                                height: calc(100% - 45px);">
                      <div class="lineClass"
                          v-for="i in [1,2,3,4,5,6,7,8,9]">
                      维保方案{{i}}
                      </div>
                    </div>
                    
          
        </div>
        <div style="height: calc(100% - 108px);
                    position: absolute;
                    width: calc(100% - 318px);
                    left: 318px;
                    top: 45px;
                    border-bottom: 1px solid #efefef;
                    overflow: auto;">
           <Table ref="selection" stripe :columns="columns1" :data="data1"></Table>
        </div>
        <div style="position: absolute;
              left: 318px;
              width: calc(100% - 376px);
              height: 45px;
              top: 0px;
              padding: 18px 10px 0px 30px;">
              <span style="font-size: 16px;
                           color: #a8afb2;">维保项目</span>
              <span style="margin-left:20px;font-size:13px;color:#3EA9F5">已选三个</span>
        </div>

      </modal-confirm>
      <Button style="margin-top: 20px" type="warning" @click="getModal">添加维保方案弹窗</Button>

      <h3>HTML代码</h3>
              <!-- 显示HTML代码 -->
      <pre>
          <code class="html" v-text="htmlCode8">
          </code>

      </pre>
  </div>

  <div v-if="selected == 'addUserModal'">
      <modal-confirm 
        title="添加角色"
        subtitle="(baoyi3)"
        :showModal="showModal"
        modalWidth="729"
        modalHeight="700"
        @on-ok-modal="okModal"
        @on-cancel-modal="cancelModal">
         <Table ref="selection" stripe :columns="columns" :data="data"></Table>
         <div style="position: absolute;
                    bottom: 21px;
                    font-size: 14px;">已选2个</div>
      </modal-confirm>
      <Button style="margin-top: 20px" type="warning" @click="getModal">添加角色弹窗</Button>

      <h3>HTML代码</h3>
              <!-- 显示HTML代码 -->
      <pre>
          <code class="html" v-text="htmlCode7">
          </code>

      </pre>
  </div>

  <div v-if="selected == 'editPostModal'">
      <modal-confirm 
        title="添加岗位"
        :showModal="showModal"
        modalWidth="684"
        modalHeight="423"
        @on-ok-modal="okModal"
        @on-cancel-modal="cancelModal">
      <div class="infoArea">
        <div class="marginT10">
          <label class="fontClass">
            岗位名称
          </label>
          <Select style="width:519px" clearable>
              <Option value="1">交互工程师</Option>
              <Option value="2">测试工程师</Option>
              <Option value="3">开发工程师</Option>
          </Select>
        </div>
        <div class="marginT10">
          <label class="fontClass">
            岗位描述
          </label>
        </div>
        <div class="marginT10">
          <textarea style="width:601px;height:194px"></textarea>
        </div>
      </div>
      </modal-confirm>
      <Button style="margin-top: 20px" type="warning" @click="getModal">添加岗位弹窗</Button>

      <h3>HTML代码</h3>
              <!-- 显示HTML代码 -->
      <pre>
          <code class="html" v-text="htmlCode6">
          </code>

      </pre>
  </div>

  <div v-if="selected == 'addPostModal'">
      <modal-confirm 
        title="添加岗位"
        :showModal="showModal"
        modalWidth="527"
        modalHeight="363"
        @on-ok-modal="okModal"
        @on-cancel-modal="cancelModal">
      <div class="infoArea">
        <div class="headerShow">
          <div style="width:127px;" class="floatL fontClass">岗位名称</div>
          <div class="fontClass">岗位描述</div>
        </div>
        <div class="marginT10" v-for="i in [1,2 ]">
          <div style="width:127px;" class="floatL fontClass">
            <input style="width:112px;" type="text" name="" placeholder="输入岗位名称">
          </div>
          <div class="fontClass">
            <input style="width:292px;" type="text" name="" placeholder="输入关键字">
            <span style="background-color: #3EA9F5;color: #fff;border-radius: 50%;display:inline-block;width: 20px;height: 20px;text-align: center;line-height: 20px;cursor: pointer;">+</span>
             <span style="background-color: #F4BA4A;color: #fff;border-radius: 50%;display:inline-block;width: 20px;height: 20px;text-align: center;line-height: 20px;cursor: pointer;">-</span>
          </div>
        </div>
      </div>
      </modal-confirm>
      <Button style="margin-top: 20px" type="warning" @click="getModal">添加岗位弹窗</Button>

      <h3>HTML代码</h3>
              <!-- 显示HTML代码 -->
      <pre>
          <code class="html" v-text="htmlCode5">
          </code>

      </pre>
  </div>
  <div v-if="selected == 'payInModal'">
      <modal-confirm 
        title="启用账号"
        :showModal="showModal"
        modalWidth="527"
        modalHeight="363"
        @on-ok-modal="okModal"
        @on-cancel-modal="cancelModal">
        <div class="infoArea">
          <div class="fontClass">确认启用该账户的用户？</div>
          <div class="marginT10"><Checkbox>备注</Checkbox></div>
          
          <div class="marginT10"><textarea placeholder="输入备注（选填）" style="width: 462px;height:40px"></textarea></div>
          
          <div><Checkbox>开通周期</Checkbox></div>
          <div class="marginT10">
            <label class="fontClass">开始时间</label>
            <DatePicker
             type="date" 
             placeholder="选择日期" 
             style="width: 247px"></DatePicker>
          </div>
          <div class="marginT10">
            <label class="fontClass">结束时间</label>
            <DatePicker
             type="date" 
             placeholder="选择日期" 
             style="width: 247px"></DatePicker>
          </div>
        </div>
      </modal-confirm>
      <Button style="margin-top: 20px" type="warning" @click="getModal">启用账号弹窗</Button>

      <h3>HTML代码</h3>
              <!-- 显示HTML代码 -->
      <pre>
          <code class="html" v-text="htmlCode4">
          </code>

      </pre>
  </div>
  <div v-if="selected == 'radioModal'">
    <modal-confirm 
      title="解锁" hideClose
      :showModal="showModal"
      modalWidth="340"
      modalHeight="230"
      @on-ok-modal="okModal"
      @on-cancel-modal="cancelModal">
      <RadioGroup v-model="vertical" vertical>
        <Radio label="1">
            <span>仅解锁</span>
        </Radio>
        <Radio label="2">
            <span>仅重置密码</span>
        </Radio>
        <Radio label="3">
            <span>解锁且重置密码</span>
        </Radio>
    </RadioGroup>
    <div>确定执行上述操作？</div>
    </modal-confirm>
    <Button style="margin-top: 20px" type="warning" @click="getModal">单选模态框</Button>

    <h3>HTML代码</h3>
            <!-- 显示HTML代码 -->
    <pre>
        <code class="html" v-text="htmlCode3">
        </code>

    </pre>
  </div>

  <div v-if="selected == 'postModal'">
    <modal-confirm 
      title="发货"
      :showModal="showModal"
      modalWidth="450"
      modalHeight="330"
      @on-ok-modal="okModal"
      @on-cancel-modal="cancelModal">
      <div class="marginT10 infoArea">
        <div class="font14">
          <label class="getR">发货时间</label>
          <DatePicker type="date" placeholder="选择日期" style="width: 300px"></DatePicker>
        </div>
        <div class="font14 marginT10">
          <label class="getR">发货单位</label>
          <input 
          type="text" 
          style="width:300px"/>
        </div>
        <div class="font14 marginT10">
          <label class="getR">收货单位</label>
          <input 
          type="text" 
          style="width:300px"/>
          
        </div>
        <div class="font14 marginT10">
          <label class="nGetR" style="vertical-align: top">备　　注</label>
          <textarea placeholder="选填" style="width:300px">
            
          </textarea>
        </div>
      </div>
    </modal-confirm>
    <Button style="margin-top: 20px" type="warning" @click="getModal">发货模态框</Button>

    <h3>HTML代码</h3>
            <!-- 显示HTML代码 -->
    <pre>
        <code class="html" v-text="htmlCode2">
        </code>

    </pre>
  </div>
  <div v-if="selected == 'confirmModal'">
    <modal-confirm 
      title="重设密码"
      :showModal="showModal"
      modalWidth="250"
      hideClose
      @on-ok-modal="okModal"
      @on-cancel-modal="cancelModal">
      <div>
        是否确认以上操作？
      </div>
    </modal-confirm>
    <Button style="margin-top: 20px" type="warning" @click="getModal">提示显示模态框</Button>

    <h3>HTML代码</h3>
            <!-- 显示HTML代码 -->
    <pre>
        <code class="html" v-text="htmlCode1">
        </code>

    </pre>
  </div>
  <div v-if="selected == 'dateModal'">
    <modal-confirm 
    title="重设开通周期"
    :showModal="showModal"
    modalWidth="300"
    modalHeight="190"
    @on-ok-modal="okModal"
    @on-cancel-modal="cancelModal">
    <div>
     <DatePicker type="date" 
     v-model="firstDate" 
     placeholder="选择日期" 
     style="width: 247px"></DatePicker>
     <DatePicker class = "marginT10" 
     type="date" 
     v-model="secondDate" 
     placeholder="选择日期" 
     style="width: 247px"></DatePicker>
    </div>
  </modal-confirm>

  <Button style="margin-top: 20px" type="warning" @click="getModal">重设开通周期模态框</Button>
  

        <h3 style="margin-top: 50px">JavaScript代码</h3>
        <!-- 显示JavaScript代码 -->
        <pre>
            <code class="javascript">
               export default {
   
                    data: function(){
                      return {
                        showModal: false,
                        firstDate:'',
                        secondDate:''
                      };
                    },

                    methods :{
                      okModal: function() {
                        var that = this;
                        console.log("firstDate: ", this.firstDate);
                        console.log("secondDate: ", this.secondDate);
                        that.showModal = false;
                      },

                      cancelModal: function() {
                        var that = this;
                        that.showModal = false;
                      },

                      getModal: function() {
                        var that = this;
                        that.showModal = true;
                      }
                    },

                    mounted: function(){
                      
                    },


                  }
            </code>
        </pre>

        <h3>HTML代码</h3>
            <!-- 显示HTML代码 -->
        <pre>
            <code class="html" v-text="htmlCode">
            </code>

        </pre>

        
  </div>
  <div class="anchor">
                <!---->
                <!---->
                <h3 id="Select_props">props</h3>
                <!---->
                <!---->
                <!---->
            </div>
            <table>
                <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>title</td>
                    <td>模态框标题</td>
                    <td>String</td>
                    <td>空</td>
                </tr>
                <tr>
                    <td>subtitle</td>
                    <td>模态框副标题</td>
                    <td>String</td>
                    <td>空</td>
                </tr>
                <tr>
                    <td>showModal</td>
                    <td>打开关闭modal</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>modalWidth </td>
                    <td>模态框宽度</td>
                    <td>Number</td>
                    <td>最小宽度200</td>
                </tr>
                <tr>
                    <td>modalHeight </td>
                    <td>模态框高度</td>
                    <td>Number</td>
                    <td>最小高度100</td>
                </tr>
                <tr>
                    <td>hideClose </td>
                    <td>true：隐藏关闭按钮，false：显示关闭按钮</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>

                </tbody>
            </table>

        <div class="anchor">
                <!---->
                <!---->
                <h3>events</h3>
                <!---->
                <!---->
                <!---->
        </div>
        <table>
                <thead>
                <tr>
                    <th>事件名</th>
                    <th>说明</th>
                    <th>返回值</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>on-ok-modal</td>
                    <td>确定按钮事件</td>
                    <td>无</td>
                </tr>
                <tr>
                    <td>on-cancel-modal</td>
                    <td>取消事件按钮</td>
                    <td>无</td>
                </tr>
                </tbody>
            </table>

</div>
</template>


<script>
  import hljs from 'highlight.js'
  export default {
   
    data: function(){
      return {
        columns1: [{
          type: 'selection',
          width: 60,
          align: 'right'          
        },
        {
            title: '维保项目',
            key: 'name',
            align: 'left' 
        },
        {
            title: '配件名称',
            key: 'name',
            align: 'left' 
        },
        {
            title: '品牌',
            key: 'name',
            align: 'left' 
        },
        {
            title: '型号',
            key: 'name',
            align: 'left' 
        },
        {
            title: '单价(元)',
            key: 'name',
            align: 'left' 
        }],
        data1:[{
          name:'我们不一样'
        },{
          name:'我们不一样'
        },{
          name:'我们不一样'
        },{
          name:'我们不一样'
        },{
          name:'我们不一样'
        },{
          name:'我们不一样'
        },{
          name:'我们不一样'
        },{
          name:'我们不一样'
        },{
          name:'我们不一样'
        },{
          name:'我们不一样'
        },{
          name:'我们不一样'
        },{
          name:'我们不一样'
        },{
          name:'我们不一样'
        }],
        columns: [{
          type: 'selection',
          width: 60,
          align: 'right'          
        },
        {
            title: '角色列表',
            key: 'name',
            align: 'left' 
        }],
        data:[{
          name:'角色分析师'
        },{
          name:'用户分析师'
        },{
          name:'角色分析师'
        },{
          name:'角色分析师'
        },{
          name:'角色分析师'
        },{
          name:'角色分析师'
        },{
          name:'角色分析师'
        },{
          name:'角色分析师'
        },{
          name:'角色分析师'
        },{
          name:'角色分析师'
        },{
          name:'角色分析师'
        },{
          name:'角色分析师'
        },{
          name:'角色分析师'
        }],
        vertical: '2',
        selected:'dateModal',
        showModal: false,
        firstDate:'',
        secondDate:'',
        htmlCode:'<modal-confirm\n'+ 
                  'title="重设开通周期"\n'+
                  ':showModal="showModal"\n'+
                  'modalWidth="300"\n'+
                  'modalHeight="190"\n'+
                  '@on-ok-modal="okModal"\n'+
                  '@on-cancel-modal="cancelModal">\n'+
                  '<div>\n'+
                   '<DatePicker type="date"\n'+ 
                   'v-model="firstDate"\n'+ 
                   'placeholder="选择日期"\n'+ 
                   'style="width: 247px"></DatePicker>\n'+
                   '<DatePicker class = "marginT10" \n'+
                   'type="date"\n'+ 
                   'v-model="secondDate" \n'+
                   'placeholder="选择日期" \n'+
                   'style="width: 247px"></DatePicker>\n'+
                  '</div>\n'+
                '</modal-confirm>',
        htmlCode1:'<modal-confirm hideClose\n'+
                  'title="重设密码"\n'+
                  ':showModal="showModal"\n'+
                  'modalWidth="250"\n'+
                  '@on-ok-modal="okModal"\n'+
                  '@on-cancel-modal="cancelModal">\n'+
                  '<div>\n'+
                    '是否确认以上操作？\n'+
                  '</div>\n'+
                '</modal-confirm>\n',
        htmlCode2:'<modal-confirm \n'+
                    'title="发货"\n'+
                    ':showModal="showModal"\n'+
                    'modalWidth="450"\n'+
                    'modalHeight="330"\n'+
                    '@on-ok-modal="okModal"\n'+
                    '@on-cancel-modal="cancelModal">\n'+
                    '<div class="marginT10 infoArea">\n'+
                      '<div class="font14">\n'+
                        '<label class="getR">发货时间</label>\n'+
                        '<DatePicker type="date" placeholder="选择日期" style="width: 300px"></DatePicker>\n'+
                      '</div>\n'+
                      '<div class="font14 marginT10">\n'+
                        '<label class="getR">发货单位</label>\n'+
                        '<input \n'+
                        'type="text" \n'+
                        'style="width:300px"/>\n'+
                      '</div>\n'+
                      '<div class="font14 marginT10">\n'+
                        '<label class="getR">收货单位</label>\n'+
                        '<input \n'+
                        'type="text" \n'+
                        'style="width:300px"/>\n'+
                        
                      '</div>\n'+
                      '<div class="font14 marginT10">\n'+
                        '<label class="nGetR" style="vertical-align: top">备　　注</label>\n'+
                        '<textarea placeholder="选填" style="width:300px">\n'+
                          
                        '</textarea>\n'+
                      '</div>\n'+
                    '</div>\n'+
                  '</modal-confirm>\n',
        htmlCode3: '<modal-confirm \n'+
                    'title="解锁" hideClose\n'+
                    ':showModal="showModal"\n'+
                    'modalWidth="340"\n'+
                    'modalHeight="230"\n'+
                    '@on-ok-modal="okModal"\n'+
                    '@on-cancel-modal="cancelModal">\n'+
                    '<RadioGroup v-model="vertical" vertical>\n'+
                      '<Radio label="1">\n'+
                          '<span>仅解锁</span>\n'+
                      '</Radio>\n'+
                      '<Radio label="2">\n'+
                          '<span>仅重置密码</span>\n'+
                      '</Radio>\n'+
                      '<Radio label="3">\n'+
                          '<span>解锁且重置密码</span>\n\n'+
                      '</Radio>\n'+
                  '</RadioGroup>\n'+
                  '<div>确定执行上述操作？</div>\n'+
                  '</modal-confirm>',
        htmlCode4:'<modal-confirm \n'+
                    'title="启用账号"\n'+
                    ':showModal="showModal"\n'+
                    'modalWidth="527"\n'+
                    'modalHeight="363"\n'+
                    '@on-ok-modal="okModal"\n'+
                    '@on-cancel-modal="cancelModal">\n'+
                    '<div class="infoArea">\n'+
                      '<div class="fontClass">确认启用该账户的用户？</div>\n'+
                      '<div class="marginT10"><Checkbox>备注</Checkbox></div>\n'+
                      
                      '<div class="marginT10"><textarea placeholder="输入备注（选填）" style="width: 462px;height:40px"></textarea></div>\n'+
                      
                      '<div><Checkbox>开通周期</Checkbox></div>\n'+
                      '<div class="marginT10">\n'+
                        '<label class="fontClass">开始时间</label>\n'+
                        '<DatePicker\n'+
                         'type="date" \n'+
                         'placeholder="选择日期" \n'+
                         'style="width: 247px"></DatePicker>\n'+
                      '</div>\n'+
                      '<div class="marginT10">\n'+
                       '<label class="fontClass">结束时间</label>\n'+
                        '<DatePicker\n'+
                         'type="date" \n'+
                         'placeholder="选择日期" \n'+
                         'style="width: 247px"></DatePicker>\n'+
                      '</div>\n'+
                    '</div>\n'+
                  '</modal-confirm>\n',
        htmlCode5:'<modal-confirm \n'+
                      'title="添加岗位"\n'+
                      ':showModal="showModal"\n'+
                      'modalWidth="527"\n'+
                      'modalHeight="363"\n'+
                      '@on-ok-modal="okModal"\n'+
                      '@on-cancel-modal="cancelModal">\n'+
                    '<div class="infoArea">\n'+
                      '<div class="headerShow">\n'+
                        '<div style="width:127px;" class="floatL fontClass">岗位名称</div>\n'+
                        '<div class="fontClass">岗位描述</div>\n'+
                      '</div>\n'+
                      '<div class="marginT10" v-for="i in [1,2 ]">\n'+
                        '<div style="width:127px;" class="floatL fontClass">\n'+
                          '<input style="width:112px;" type="text" name="" placeholder="输入岗位名称">\n'+
                        '</div>\n'+
                        '<div class="fontClass">\n'+
                          '<input style="width:292px;" type="text" name="" placeholder="输入关键字">\n'+
                          '<span style="background-color: #3EA9F5;color: #fff;border-radius: 50%;display:inline-block;width: 20px;height: 20px;text-align: center;line-height: 20px;cursor: pointer;">+</span>\n'+
                           '<span style="background-color: #F4BA4A;color: #fff;border-radius: 50%;display:inline-block;width: 20px;height: 20px;text-align: center;line-height: 20px;cursor: pointer;">-</span>\n'+
                        '</div>\n'+
                      '</div>\n'+
                    '</div>\n'+
                    '</modal-confirm>',
        htmlCode6:'<modal-confirm \n'+
                      'title="添加岗位"\n'+
                      ':showModal="showModal"\n'+
                      'modalWidth="684"\n'+
                      'modalHeight="423"\n'+
                      '@on-ok-modal="okModal"\n'+
                      '@on-cancel-modal="cancelModal">\n'+
                    '<div class="infoArea">\n'+
                      '<div class="marginT10">\n'+
                        '<label class="fontClass">\n'+
                          '岗位名称\n'+
                        '</label>\n'+
                        '<Select style="width:519px" clearable>\n'+
                            '<Option value="1">交互工程师</Option>\n'+
                            '<Option value="2">测试工程师</Option>\n'+
                            '<Option value="3">开发工程师</Option>\n'+
                        '</Select>\n'+
                      '</div>\n'+
                      '<div class="marginT10">\n'+
                        '<label class="fontClass">\n'+
                          '岗位描述\n'+
                        '</label>\n'+
                      '</div>\n'+
                      '<div class="marginT10">\n'+
                        '<textarea style="width:601px;height:194px"></textarea>\n'+
                      '</div>\n'+
                    '</div>\n'+
                    '</modal-confirm>',
        htmlCode7:'<modal-confirm \n'+
                      'title="添加角色"\n'+
                      'subtitle="(baoyi3)"\n'+
                      ':showModal="showModal"\n'+
                      'modalWidth="729"\n'+
                      'modalHeight="700"\n'+
                      '@on-ok-modal="okModal"\n'+
                      '@on-cancel-modal="cancelModal">\n'+
                       '<Table ref="selection" stripe :columns="columns" :data="data"></Table>\n'+
                       '<div style="position: absolute;\n'+
                                  'bottom: 21px;\n'+
                                  'font-size: 14px;">已选2个</div>\n'+
                    '</modal-confirm>',
        htmlCode8:'<modal-confirm \n'+
                    'title="添加维保方案"\n'+
                    'subtitle="(车牌号:湘A5678Q)"\n'+
                    ':showModal="showModal"\n'+
                    'modalWidth="1000"\n'+
                    'modalHeight="560"\n'+
                    '@on-ok-modal="okModal"\n'+
                    '@on-cancel-modal="cancelModal">\n'+
                    '<div style="height: 100%;\n'+
                                'width: 318px;\n'+
                                'position: absolute;\n'+
                                'top: 0px;\n'+
                                'left: 0px;\n'+
                                'border-right: 1px solid #efefef;">\n'+
                                '<div style="margin-top: 45px;\n'+
                                            'overflow: auto;\n'+
                                            'height: calc(100% - 45px);">\n'+
                                  '<div class="lineClass"\n'+
                                      'v-for="i in [1,2,3,4,5,6,7]">\n'+
                                  '维保方案{{i}}\n'+
                                  '</div>\n'+
                                '</div>\n'+
                    '</div>\n'+
                    '<div style="height: calc(100% - 108px);\n'+
                                'position: absolute;\n'+
                                'width: calc(100% - 318px);\n'+
                                'left: 318px;\n'+
                                'top: 45px;\n'+
                                'border-bottom: 1px solid #efefef;\n'+
                                'overflow: auto;">\n'+
                       '<Table ref="selection" stripe :columns="columns1" :data="data1"></Table>\n'+
                    '</div>\n'+
                    '<div style="position: absolute;\n'+
                          'left: 318px;\n'+
                          'width: calc(100% - 376px);\n'+
                          'height: 45px;\n'+
                          'top: 0px;\n'+
                          'padding: 18px 10px 0px 30px;">\n'+
                          '<span style="font-size: 16px;\n'+
                                       'color: #a8afb2;">维保项目</span>\n'+
                          '<span style="margin-left:20px;font-size:13px;color:#3EA9F5">已选三个</span>\n'+
                    '</div>\n'+
                  '</modal-confirm>',
        htmlCode9:'<modal-confirm \n'+
                    'title="添加维保方案"\n'+
                    'subtitle="(车牌号:湘A5678Q)"\n'+
                    ':showModal="showModal"\n'+
                    'modalWidth="600"\n'+
                    'modalHeight="400"\n'+
                    '@on-ok-modal="okModal"\n'+
                    '@on-cancel-modal="cancelModal">\n'+
                    '<div class="marginT10 infoArea">\n'+
                    '<div class="font14">\n'+
                      '<label class="rRtar">保养项目</label>\n'+
                      '<input \n'+
                      'type="text" \n'+
                      'style="width:300px"/>\n'+
                    '</div>\n'+
                    '<div class="font14 marginT10">\n'+
                      '<label class="rRtar">配件名称</label>\n'+
                      '<input \n'+
                      'type="text" \n'+
                      'style="width:300px"/>\n'+
                    '</div>\n'+
                    '<div class="font14 marginT10">\n'+
                      '<label class="rRtar">配件品牌</label>\n'+
                      '<input \n'+
                      'type="text" \n'+
                      'style="width:300px"/>\n'+
                      
                    '</div>\n'+
                    '<div class="font14 marginT10">\n'+
                      '<label class="rRtar">配件型号</label>\n'+
                      '<input \n'+
                      'type="text" \n'+
                      'style="width:300px"/>\n'+
                      
                    '</div>\n'+
                    '<div class="font14 marginT10">\n'+
                      '<label class="rRtar">收费标准</label>\n'+
                      '<input \n'+
                      'type="text" \n'+
                      'style="width:200px"\n'+
                      'placeholder="单价(元)" />\n'+
                      '<input \n'+
                      'type="text" \n'+
                      'style="width:100px"\n'+
                      'placeholder="单位" />\n'+
                      '<input \n'+
                      'type="text" \n'+
                      'style="width:100px"\n'+
                      'placeholder="数量" />\n'+
                      
                    '</div>\n'+
                    '<div class="font14 marginT10">\n'+
                      '<label class="rRtar">实际收费</label>\n'+
                      '<input \n'+
                      'type="text" \n'+
                      'style="width:200px"\n'+
                      'placeholder="材料费(元)" />\n'+
                      '<input \n'+
                      'type="text" \n'+
                      'style="width:215px"\n'+
                      'placeholder="工时费(元)"/>\n'+
                      
                    '</div>\n'+
                  '</div>\n'+
                  '<div style="position: absolute;\n'+
                              'bottom: 23px;">\n'+
                     '<Checkbox style="font-size:14px; color:#5E6D76;">继续添加</Checkbox>\n'+
                  '</div>\n'+
                  '</modal-confirm>'
      };
    },

    methods :{
      okModal: function() {
        var that = this;
        console.log("firstDate: ", this.firstDate);
        console.log("secondDate: ", this.secondDate);
        that.showModal = false;
      },

      cancelModal: function() {
        var that = this;
        that.showModal = false;
      },

      getModal: function() {
        var that = this;
        that.showModal = true;
      },
     
      changeMenu: function (menuName){
          //切换菜单
          var that = this;
          that.selected = menuName;
      }
        
    },

    mounted: function () {
            window.setTimeout(function () {
                $('.modalDemoIndex pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 100);
        },

  }
</script>

<style scoped lang="scss">
  .modalDemoIndex {
    padding: 10px;
    
    .lineClass {
      height: 50px;
      padding: 10px 10px 10px 26px;
      font-size: 14px;
    }
    .lineClass:hover {
      background-color:#EDF1F4;
      cursor: pointer;
    }
    .fontClass { 
      font-size: 14px;
      color: #506470
    }
    .infoArea{

        label {
          display: inline-block;
          width: 80px;
        }

        input{
            height: 30px;
            line-height: 30px;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 5px;
            margin-right: 10px;
          }

        textarea{
            line-height: 30px;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 5px;
            margin-right: 10px;
          }

        .selectbox {
          padding: 2px 10px 2px 10px;
          border: 1px solid #ddd;
          background-color: #ffffff;
          cursor: pointer;
        }

        .selected {
          color: #ffffff;
          background-color: #3EA9F5;
        }
    }
    
    .getR:before{
        content: "*";
        display: inline-block;
        margin-right: 4px;
        line-height: 1;
        font-family: SimSun;
        font-size: 12px;
        color: #ed3f14;
    }

    .rRtar:before{
        content: "★";
        display: inline-block;
        margin-right: 4px;
        line-height: 1;
        font-family: -webkit-body;;
        font-size: 12px;
        color: #FABD22;
    }

    .nGetR:before{
        content: "*";
        display: inline-block;
        margin-right: 4px;
        line-height: 1;
        font-family: SimSun;
        font-size: 12px;
        color: #ed3f14;
        opacity: 0;
      }

    .floatR {
          float: right;
        }

    .floatL {
      float: left;
    }
    
    .fontB {
      font-weight: bold;
    }

    .font16 {
      font-size: 16px !important;
    }

    .font14 {
      font-size: 14px;
    }

    .status {
      color: #A8AFB2;
    }

    .cusP {
      cursor: pointer;
    }

    .marginT10 {
      margin-top: 10px;
    }

    .marginL10 {
      margin-left: 10px;
    }

    .marginT20 {
      margin-top: 20px;
    }

    table {
            font-family: Consolas,Menlo,Courier,monospace;
            font-size: 12px;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
            border: 1px solid #e9e9e9;
            width: 100%;
            margin-bottom: 24px;
        }

    table td, table th {
        border: 1px solid #e9e9e9;
        padding: 8px 16px;
        text-align: left;
    }

    table th {
        background: #f7f7f7;
        white-space: nowrap;
        color: #5c6b77;
        font-weight: 600;
    }
  }

</style>


